<template>
  <div class="controller">
    <input @input="debounceHandler" type="text"  />
    <p class="result">{{ text }} </p>
    <p>第二种</p>
    <input v-model="text2" type="text"  />
    <p class="result">{{ text2 }} </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { debounce,debounceRef } from '../utils/debounce';
// console.log(debounce);
const text = ref('');
const inputHandler = (e) => {
  text.value = e.target.value;
}
const debounceHandler = debounce(inputHandler, 500);

const text2 = debounceRef('',500);
</script>

<style scoped>
.controller {
  width: 80%;
  margin: 1em auto;
}

.result {
 color: #333;
}
.controller input {
  width: 100%;
  height: 2em;
  padding: 0 1em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

</style>